<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../rest.css">
    <style>
        table,
        th,
        td {
            border: 0.5px solid #333;
        }

        table {
            width: 600px;
            table-layout: fixed;
            border-collapse: collapse;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>张三</td>
                <td>2213</td>
                <td>55</td>
                <td>66</td>
                <td>77</td>
                <td>198</td>
            </tr> -->
        </tbody>
    </table>
</body>
<script>
    var list = [
        { name: "张三", class: 2213, chinese: 55, math: 66, english: 77 },
        { name: "李四", class: 2213, chinese: 68, math: 79, english: 82 },
        { name: "王五", class: 2213, chinese: 93, math: 49, english: 87 },
        { name: "小六", class: 2213, chinese: 100, math: 100, english: 100 },
    ]
    var tbody = document.querySelector('tbody')

    var html = ``
    list.forEach(({ name, class: cla, chinese, math, english }) => {
        html += `
        <tr>
                <td>${name}</td>
                <td>${cla}</td>
                <td>${chinese}</td>
                <td>${math}</td>
                <td>${english}</td>
                <td>${chinese + math + english}</td>
                <td class='del'>删除</td>
            </tr>
        `
    })
    tbody.innerHTML = html


    /*-----------------------------------------------------*/
    var delList = document.getElementsByClassName('del')
    for (let i = 0; i < delList.length; i++) {
        delList[i].onclick = function () {
            this.parentElement.remove()
        }
    }



</script>

</html>